<template>
  <div class="play-options border-bottom">
    <div class="tabs">
      <div 
        class="tab" 
        v-for="(item, index) in options" 
        :key="item.id"
        @click="handleClick(index, item.currentComponent, item.currentSubTab, item.currentSubId)"
        :class="currentMainIndex === index ? 'button-selected' : ''"
      >
        {{item.context}}
      </div>
    </div>
  </div>
</template>

<script> 
import { mapMutations } from 'vuex'

export default {
  props: {
    options: {
      type: Array,
      require: true
    },
    currentMainIndex: {
      type: Number,
      require: true
    }
  },
  methods: {
    handleClick(index, component, subTab, subId) {
      // 选中的main tab的index传递给父组件
      this.$emit('click', index)
      this.setCurrentTab({subTabName: subTab, id: subId})
      this.setCurrentComponent(component)
    },
    ...mapMutations('lottery', {
      setCurrentTab: 'SET_CURRENT_TAB',
      setCurrentComponent: 'SET_CURRENT_COMPONENT'
    })
  }
}
</script>

<style lang="stylus" scoped>
  .play-options
    width 100%
    height 38px
    border-top 2px solid #E02828
    box-sizing border-box
    .tabs
      width 100%
      display flex
      .tab
        line-height 34px
        padding 0 20px
        float left
        text-align center
        font-weight 700
        border-radius 0
        box-sizing border-box
        cursor pointer
        &.active
          color #fff
          font-weight 700
          background rgba(224,40,40,1)
          box-shadow 0px 1px 0px 0px rgba(224,224,224,1)
    
</style>